$(function () {

    var jcrop_api,
        boundx,
        boundy,
        xsize = 200,
        ysize = 200;

    $("#crop-avatar").Jcrop({
        aspectRatio: xsize / ysize,
        onSelect: updateCoords,
        setSelect: [0, 0, 200, 200]
    },function(){
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        jcrop_api = this;
    });

    function updateCoords(c) {
        $("#x").val(c.x);
        $("#y").val(c.y);
        $("#w").val(c.w);
        $("#h").val(c.h);
    };

    $("#btn-upload-avatar").click(function () {
        $("#avatar-upload-form input[name='avatar']").click();
    });

    $("#avatar-upload-form input[name='avatar']").change(function () {
        $("#avatar-upload-form").submit();
    });

});